<template>
  <div class="container">
    <!-- Header -->
    <van-row class="header" align="center" justify="space-between">
      <!-- Avatar Upload -->
      <van-cell title-style="text-align: center" style="background-color: #f0f2f5">
        <template #title>
            <van-uploader
                v-model="fileList"
                :after-read="afterRead"
                multiple
                :max-count="1"
                :show-upload-btn="false"
                :deletable="false"
                class="image-uploader"
            >
              <template #default="{ file }">
                <img
                    v-if="fileList.length"
                    :src="fileList[0].url"
                    class="avatar"
                    @click="showModal = true"
                />
              </template>
            </van-uploader>
        </template>

        <template #value>
          <div style="margin-bottom: 10px; text-align: left">
            <!-- Small Upload Avatar Button -->
            <van-button
                type="default"
                size="small"
                icon="plus"
                @click="showModal = true"
                class="upload-btn"
            >
              上传头像
            </van-button>
          </div>

          <div>
            <van-cell
                is-link
                title="个人信息"
                class="username"
                @click="goToUserInfo"
                style="display: flex; align-items: center;"
                title-style="text-align: center"
            >
              <template #icon>
                <van-icon name="manager" />
              </template>
            </van-cell>
          </div>
        </template>
      </van-cell>

<!--      <van-col span="8">-->
<!--        <van-uploader-->
<!--            v-model="fileList"-->
<!--            :after-read="afterRead"-->
<!--            multiple-->
<!--            :max-count="1"-->
<!--            :show-upload-btn="false"-->
<!--        >-->
<!--          <template #default="{ file }">-->
<!--            <img-->
<!--                v-if="fileList.length"-->
<!--                :src="fileList[0].url"-->
<!--                class="avatar"-->
<!--                @click="showModal = true"-->
<!--            />-->
<!--            <van-icon-->
<!--                v-else-->
<!--                name="photo"-->
<!--                class="add-icon"-->
<!--                @click="showModal = true"-->
<!--            />-->
<!--          </template>-->
<!--        </van-uploader>-->

<!--        &lt;!&ndash; Small Upload Avatar Button &ndash;&gt;-->
<!--        <van-button-->
<!--            type="default"-->
<!--            size="small"-->
<!--            icon="plus"-->
<!--            @click="showModal = true"-->
<!--            class="upload-btn"-->
<!--        >-->
<!--          上传头像-->
<!--        </van-button>-->
<!--      </van-col>-->

<!--      &lt;!&ndash; User Info &ndash;&gt;-->
<!--      <van-col span="10">-->
<!--        <van-cell-->
<!--            is-link-->
<!--            title="个人信息"-->
<!--            class="username"-->
<!--            @click="goToUserInfo"-->
<!--            style="display: flex; align-items: center;"-->
<!--        >-->
<!--          <template #icon>-->
<!--            <van-icon name="manager" />-->
<!--          </template>-->
<!--        </van-cell>-->

<!--      </van-col>-->

<!--      &lt;!&ndash; Icons &ndash;&gt;-->
<!--      <van-col span="6" class="icons-container">-->
<!--        <van-icon name="chat-o" dot class="icon" />-->
<!--      </van-col>-->
    </van-row>

    <!-- Modal for Avatar Upload -->
    <van-popup v-model:show="showModal" position="bottom">
      <van-cell-group>
        <van-cell title="上传头像" class="upload-cell">
          <input type="file" @change="handleFileChange" class="upload-input" />
        </van-cell>
      </van-cell-group>
    </van-popup>

    <!-- Middle Section: Hotel Images (Placeholder) -->
    <div class="middle">
      <van-row class="middle-content">
        <van-col span="24" v-for="(hotel, index) in hotels" :key="index">
          <img class="hotel-image" :src="hotel.imageUrl"   alt="Hotel"   />
        </van-col>
      </van-row>
    </div>

    <!-- Bottom Navigation -->
    <van-cell-group class="bottom">
      <van-cell title="优惠券" is-link @click="goToCoupon">
        <template #icon>
          <van-icon name="coupon" />
        </template>
      </van-cell>
      <van-cell title="我的VIP" is-link @click="goToVIP">
        <template #icon>
          <van-icon name="vip-card" />
        </template>
      </van-cell>
      <van-cell title="我的钱包" is-link @click="goToWallet">
        <template #icon>
          <van-icon name="balance-list" />
        </template>
      </van-cell>
      <van-cell title="订单返现" is-link @click="goTocashBack">
        <template #icon>
          <van-icon name="gold-coin" />
        </template>
      </van-cell>
      <van-cell title="我的收藏" is-link @click="goToMyCollect">
        <template #icon>
          <van-icon name="star" />
        </template>
      </van-cell>
      <van-cell title="我的房间" is-link @click="goToMyRoom">
        <template #icon>
          <van-icon name="wap-home" />
        </template>
      </van-cell>
      <van-cell title="常见问题" is-link @click="goToQuestion">
        <template #icon>
          <van-icon name="question" />
        </template>
      </van-cell>
    </van-cell-group>
    <!-- Logout Button -->
    <van-button
        type="warning"
        size="small"
        @click="logout"
        class="logout-btn"
    >
      退出账号
    </van-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { get } from '../util/request.js';
import { postFile } from '../util/reqeustfile.js';
import { useStore } from '../pinia/index.js';
import { showToast } from 'vant';

const store = useStore();

const router = useRouter();

// Initial data
const hotels = [{ imageUrl: 'src/image/img.png' }];
const fileList = ref([{ url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg' }]);
const showModal = ref(false);

// Methods
const goToCoupon= () => router.push('/Coupon');
const goToVIP = () => router.push('/vip');
const goToWallet = () => router.push('/wallet');
const goToQuestion = () => router.push('/question');
const goTocashBack = () => router.push('/cashBack');
const goToUserInfo = () => router.push('/userInfo');
const goToMyCollect = () => router.push('/MyCollect');
const goToMyRoom = () => router.push('/MyRoom');

const logout = () => {
  get('user/logout')
      .then(r => {
        router.push('/');
        store.setToken('');
        showToast(r.data);
      })
      .catch(err => console.error('退出登录失败:', err));
};

const afterRead = (file) => {
  postFile('minio/upload', file.file)
      .then(r => {
        fileList.value[0].url = r.data;
        showModal.value = false;
      })
      .catch(err => console.error('上传头像失败:', err));
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    fileList.value[0].url = URL.createObjectURL(file);
    afterRead({ file });
  }
};

watch(fileList, (newVal) => console.log('File list updated:', newVal));
</script>

<style scoped>
/* Custom styles for better visual appeal */

.container {
  padding: 50px;
  background-color: #f0f2f5;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  cursor: pointer;
  border: 2px solid #fff; /* 添加白色边框 */
}

.add-icon {
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.upload-btn {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  background-color: #1989fa; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
}

.upload-btn:hover {
  background-color: #0070f3; /* 深蓝色背景 */
}

.middle {
  margin-top: 10px;
}

.hotel-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.bottom {
  margin-top: 10px;
  margin-bottom: 10px;
}

.logout-btn {

  margin-top: 10px;
  width: 100%;
  background-color: #ff5e57; /* 红色背景 */
  color: #fff; /* 白色文字 */
}

.logout-btn:hover {
  background-color: #ff3333; /* 深红色背景 */
}
.upload-cell {
  padding: 8px 16px; /* 调整上传单元格的内边距 */
}

.image-uploader {
  --van-uploader-size: 120px;
  --van-uploader-border-radius: 100%
}

.upload-input {
  font-size: 14px; /* 调整上传按钮的字体大小 */
  padding: 8px; /* 调整上传按钮的内边距 */
}
</style>
